<template>
  <div class="params-item">
    <div class="title">
      <p>{{ data.title }}</p>
      <Icon type="ios-help-circle-outline" size="18" color="#000" @click="onHelp" />
    </div>
    <div class="detail">
      <dt-info ref="info" v-if="data.form"
        :label-width="data.form.labelWidth"
        :options="options"
        @change='onChange'
      />
      <dt-grid ref="table" v-show="data.table && list && list.length"
        :columns="columns"
        :list="list"
        height-resize
        size="small"
        :style="{
          marginBottom: !data.tips ? '20px' : '',
          width: data.table && data.table.width ? data.table.width + 'px' : ''
        }"
      />
      <p v-if="data.tips" class="tips">{{ data.tips }}</p>
    </div>
    
    <help-modal ref="help" />
	</div>
</template>

<script>
  import helpModal from './help-modal.vue'
  
  export default {
    props: {
      data: Object,
      detail: Object
    },
    components: {
      helpModal
    },
    data() {
      return {
        options: null,
        info: null,
        columns: null,
        list: null
      }
    },
    mounted() {
      this.info = this.detail
      this.init()
    },
    methods: {
      init() {
        if (this.data.form) {
          this.options = this.data.form.options(this)
          this.$refs.info.init(this.options, this.info)
        }
        if (this.data.table) {
          this.list = this.info[this.data.table.listKey] || []
          this.columns = this.data.table.columns(this)
          this.$refs.table.init(this)
        }
      },
      onDelete(data) {
        let index = this.list.findIndex(i => i == data)
        this.list.splice(index, 1)
      },
      onChange(data) {
        console.log('change', data)
      },
      onHelp() {
        this.$refs.help.show(this.data.help)
      },
    },
    watch: {
      detail(n) {
        this.info = n
        this.init()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .params-item {
    margin-bottom: 30px;
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      p {
        line-height: 18px;
        border-left: 3px solid #2b85e4;
        padding-left: 8px;
        margin-right: 5px;
      }
      i {
        cursor: pointer;
      }
    }
    
    .detail {
      background-color: #FAFAFA;
      border-radius: 4px;
      border: 1px solid #F5F5F5;
      padding: 20px 12px 0;
    }
    
    .tips {
      margin: 10px 0 20px;
    }
  }
</style>
